<template>
  <el-dialog
    v-model="dialogVisible"
    title="员工简历预览"
    width="900px"
    :before-close="handleClose"
  >
    <div v-if="employee" class="resume-container">
      <!-- 简历头部 -->
      <div class="resume-header">
        <div class="basic-info">
          <h2>{{ employee.name }}</h2>
          <div class="contact-info">
            <span v-if="employee.email">📧 {{ employee.email }}</span>
            <span v-if="employee.phone">📞 {{ employee.phone }}</span>
          </div>
        </div>
        <div class="position-info">
          <el-tag type="primary">{{ employee.position }}</el-tag>
          <div class="department">{{ employee.department }}</div>
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="resume-section">
        <h3>基本信息</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>学历:</label>
              <span>{{ employee.education }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>工作年限:</label>
              <span>{{ employee.workYears }}年</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>入职日期:</label>
              <span>{{ employee.joinDate }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 详细简历内容 -->
      <div v-if="employee.resume" class="resume-section">
        <h3>个人简介</h3>
        <div class="resume-content">
          {{ employee.resume }}
        </div>
      </div>

      <!-- 培训记录 -->
      <div v-if="employee.trainingRecords && employee.trainingRecords.length > 0" class="resume-section">
        <h3>培训记录</h3>
        <div class="training-list">
          <div v-for="training in employee.trainingRecords" :key="training.id" class="training-item">
            <div class="training-header">
              <span class="course-name">{{ training.courseName }}</span>
              <el-tag :type="getScoreType(training.score)" size="small">
                {{ training.score }}分
              </el-tag>
            </div>
            <div class="training-details">
              <span class="course-type">{{ training.courseType }}</span>
              <span class="training-date">{{ training.trainingDate }}</span>
              <span class="instructor">讲师: {{ training.instructor }}</span>
            </div>
            <div v-if="training.certificate" class="certificate">
              证书: {{ training.certificate }}
            </div>
          </div>
        </div>
      </div>

      <!-- 绩效记录 -->
      <div v-if="employee.performances && employee.performances.length > 0" class="resume-section">
        <h3>绩效记录</h3>
        <div class="performance-list">
          <div v-for="performance in employee.performances" :key="performance.id" class="performance-item">
            <div class="performance-header">
              <span class="period">{{ performance.period }}</span>
              <el-rate
                v-model="performance.overallScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
                size="small"
              />
            </div>
            <div class="performance-details">
              <span>评估日期: {{ performance.evaluationDate }}</span>
              <span>评估人: {{ performance.evaluator }}</span>
            </div>
            <div v-if="performance.achievements" class="achievements">
              <strong>主要成果:</strong> {{ performance.achievements }}
            </div>
            <div v-if="performance.comments" class="comments">
              <strong>评语:</strong> {{ performance.comments }}
            </div>
          </div>
        </div>
      </div>

      <!-- 无简历数据提示 -->
      <el-empty 
        v-if="!employee.resume && 
              (!employee.trainingRecords || employee.trainingRecords.length === 0) && 
              (!employee.performances || employee.performances.length === 0)"
        description="暂无完整的简历数据"
      />
    </div>

    <el-empty v-else description="暂无员工数据" />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handlePrint" v-if="employee">
          <el-icon><Printer /></el-icon>
          打印简历
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'EmployeeResume',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    employee: {
      type: Object,
      default: null
    }
  },
  emits: ['update:modelValue', 'close'],
  setup(props, { emit }) {
    const dialogVisible = ref(false)

    const getScoreType = (score) => {
      if (score >= 9) return 'success'
      if (score >= 7) return 'warning'
      return 'danger'
    }

    watch(
      () => props.modelValue,
      (newVal) => {
        dialogVisible.value = newVal
      }
    )

    watch(dialogVisible, (newVal) => {
      emit('update:modelValue', newVal)
    })

    const handleClose = () => {
      dialogVisible.value = false
      emit('close')
    }

    const handlePrint = () => {
      window.print()
    }

    return {
      dialogVisible,
      getScoreType,
      handleClose,
      handlePrint
    }
  }
}
</script>

<style scoped>
.resume-container {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.resume-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #409EFF;
}

.basic-info h2 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 24px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #606266;
}

.position-info {
  text-align: right;
}

.department {
  margin-top: 8px;
  color: #909399;
}

.resume-section {
  margin-bottom: 30px;
}

.resume-section h3 {
  color: #409EFF;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
}

.info-item label {
  font-weight: bold;
  min-width: 80px;
  color: #606266;
}

.resume-content {
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap;
}

.training-list,
.performance-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.training-item,
.performance-item {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
}

.training-header,
.performance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.course-name {
  font-weight: bold;
  color: #303133;
}

.period {
  font-weight: bold;
  color: #303133;
}

.training-details,
.performance-details {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.certificate {
  font-size: 12px;
  color: #67c23a;
}

.achievements,
.comments {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.achievements strong,
.comments strong {
  color: #303133;
}

/* 打印样式 */
@media print {
  .el-dialog {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  
  .el-dialog__header,
  .el-dialog__footer {
    display: none;
  }
  
  .el-dialog__body {
    padding: 0;
  }
  
  .resume-container {
    max-height: none;
    overflow: visible;
    padding: 20mm;
  }
}
</style>